<template>
  <el-carousel indicator-position="outside"
               class="b-carousel" v-if="imgs.length">
    <el-carousel-item v-for="url in imgs"
                      :key="url">
      <img :src="url"
           alt=""
           style="width:100%;height:100%">
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  name: 'BCarousel',
  props: {
    items: {
      type: String
    }
  },
  computed: {
    imgs () {
      if (typeof this.items === 'string' && this.items !== '') {
        return this.items.split(',')
      }
      return []
    }
  }
}
</script>

<style lang="scss" scoped>
.b-carousel {
  border-radius: 4px;
  ::v-deep .el-carousel__container {
    background-color: #f0f0f0;
    height: 383px;
  }
}
</style>
